<%@ page import="service.BookService" %>
<%@ page import="model.Book" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: Lu
  Date: 2021/12/19
  Time: 15:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>BOOK STORE</title>
    <link rel="stylesheet" href="css/General.css">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bookstore.js"></script>
</head>
<body class="body">
<% request.setCharacterEncoding("utf-8");%>
<div class="header">
    <div class="logo">GoodBooks</div>
    <div class="tab_bar">
        <div class="btn-group header-menu">
            <button type="button" class="btn btn-default dropdown-toggle"
                    data-toggle="dropdown">
                menu <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" style="top: 65%;" role="menu">
                <li><a href="#">功能</a></li>
                <li><a href="#">另一个功能</a></li>
                <li><a href="#">其他</a></li>
                <li class="divider"></li>
                <li><a href="#">个人信息设置</a></li>
            </ul>
        </div>
        <div class="header-item btn btn-default" id="login"><a href="#myModal" data-toggle="modal" >log in</a></div>
        <div class="header-item btn btn-default show-cart">
            <a href="#showCart"  data-toggle="modal">
                <img src="image/img_1.png" width="20px" height="22px">
                Cart(2)
            </a>
        </div>
    </div>
</div>
<div class="search">
    <div class="text-icon">~~~</div>
    <input type="text" class="search-input" placeholder="搜一搜 好书!啥都有">
    <button class="search_icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M21 21L16.6569 16.6569M16.6569 16.6569C18.1046 15.2091 19 13.2091 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19C13.2091 19 15.2091 18.1046 16.6569 16.6569Z" stroke="#242328" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </button>
</div>
<div class="content">
    <% BookService service = new BookService();
        List<Book> booklist;
        booklist = service.SelectAllBookInformation();
        for(Book book:booklist){
    %>
    <div class="book-item">
        <a href="DetailPage.jsp?bkName=<%=book.getBk_name()%>&bkPrice=<%=book.getBk_price()%>">
            <div class="book-image">
                <img src="image/img.png" width="100%">
            </div>
        </a>
        <div></div>
        <div class="book-info">
            <div>
                <a href="DetailPage.jsp?bkName=<%=book.getBk_name()%>&bkPrice=<%=book.getBk_price()%>" class="text-a">
                    <p class="book-name"><%=book.getBk_name()%></p>
                </a>
                <p class="book-icon"><%=book.getBk_a_name()%></p>
            </div>
            <div class="book-price" style="font-size: 16px">￥<%=book.getBk_price()%></div>
        </div>
    </div>
    <%}%>
</div>
<div class="page_split">
    <a href="#" class="text-a btn-previous"><img src="image/img_2.png" height="40px" width="40px"><div style="margin-top: 10px">Previous</div></a>
    <div class="page-num">
        Page 2 - 36
    </div>
    <a href="#" class="text-a btn-next" style="display: flex"><div style="margin-top: 10px">Next</div><img src="image/img_3.png" height="40px" width="40px"></a>
</div>
<div class="subscription">
    <div class="subscription-text">Join our and Subscribe our message</div>
    <input type="text" placeholder="添加评论" />
    <button class="subscribe">
        Subscribe
    </button>
</div>
<div class="footer">
    <div class="footer-box">
        <div class="footer-label">
            <p><a href="#">All books</a></p>
            <p><a href="#">Architecture</a></p>
            <p><a href="#">Arts & Entertainment</a></p>
            <p><a href="#">Bios & Memoirs</a></p>
            <p><a href="#">Business & Management</a></p>
            <p><a href="#">Design & Print</a></p>
        </div>
        <div class="footer-label">
            <p><a href="#">Economic & Politics</a></p>
            <p><a href="#">Fiction</a></p>
            <p><a href="#">Graphic Design</a></p>
            <p><a href="#">Health & Fitness</a></p>
            <p><a href="#">Business & Management</a></p>
            <p><a href="#">Design & Print</a></p>
        </div>
        <div class="footer-label">
            <p><a href="#">Non-Fiction</a></p>
            <p><a href="#">Philosophy</a></p>
            <p><a href="#">Photograhpy</a></p>
            <p><a href="#">Productivity</a></p>
            <p><a href="#">Psychology</a></p>
            <p><a href="#">Science & Nature</a></p>
        </div>
        <div class="footer-label">
            <p><a href="#">Self Improvement</a></p>
            <p><a href="#">Architecture</a></p>
            <p><a href="#">Technology</a></p>
        </div>
        <div class="footer-label">
            <p><a href="#">Ablout us</a></p>
            <p><a href="#">Contact</a></p>
            <p><a href="#">Support</a></p>
            <p><a href="#">Privacy</a></p>
            <p><a href="#">Privacy</a></p>
            <p><a href="#">Cookies</a></p>
        </div>
    </div>
    <div class="footer-author">
        <div class="logo">goodbooks</div>
        <div class="author">Designed by lu.</div>
    </div>
</div>
<!-- 登录模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 200px;">
    <div class="modal-dialog">
        <div class="modal-content" style="height: 360px;">
            <div class="modal-header" style="border: none;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <!-- <h4 class="modal-title" id="myModalLabel">login</h4> -->
            </div>
            <h3 class="login-title" style="text-align: center;">Login</h3>
            <!-- <div class="modal-body"></div> -->
            <form class="form-horizontal" role="form" style="margin-top: 30px;">
                <div class="form-group" style="display: flex; margin-left: 80px;">
                    <label for="firstname" class="col-sm-2 control-label">用户名</label>
                    <input type="text" class="form-control" id="firstname" placeholder="请输入用户名" style="width: 320px;">
                </div>
                <div class="form-group" style="display: flex; margin-left: 80px;">
                    <label for="lastname" class="col-sm-2 control-label">密码</label>
                    <input type="password" class="form-control" id="lastname" placeholder="请输入密码" style="width: 320px;">
                </div>
                <div class="form-group" style="margin-left: 65px;">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox" style="display: flex;">
                            <a class="forgot-pw" href="#">Forgot password ?</a>
                            <a class="register" href="#register" data-toggle="modal" >Register now</a>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <input class="login-btn" type="submit" value="LOGIN"/>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 注册模态框（Modal） -->
<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content" style="height: 500px;">
            <div class="modal-header" style="border: none;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <!-- <h4 class="modal-title" id="myModalLabel">login</h4> -->
            </div>
            <h3 class="login-title" style="text-align: center;">Create Account</h3>
            <!-- <div class="modal-body"></div> -->
            <form class="form-horizontal" role="form" style="margin-top: 30px;">
                <div class="form-group" style="display: flex; margin-left: 20px;">
                    <label for="firstname" class="col-sm-3 control-label">用户名</label>
                    <input type="text" class="form-control" id="" placeholder="请输入用户名" style="width: 320px;">
                </div>
                <div class="form-group" style="display: flex; margin-left: 20px;">
                    <label for="lastname" class="col-sm-3 control-label">密码</label>
                    <input type="password" class="form-control" placeholder="请输入密码" style="width: 320px;">
                </div>
                <div class="form-group" style="display: flex; margin-left: 20px;">
                    <label for="lastname" class="col-sm-3 control-label">确认密码</label>
                    <input type="password" class="form-control"  placeholder="请再次输入密码" style="width: 320px;">
                </div>
                <div class="form-group" style="display: flex; margin-left: 20px;">
                    <label for="lastname" class="col-sm-3 control-label">性别</label>
                    <label class="radio-inline">
                        <input type="radio" name="sex" value="男" checked> 男
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="sex" value="女"> 女
                    </label>
                </div>
                <div class="form-group" style="display: flex; margin-left: 20px;">
                    <label for="lastname" class="col-sm-3 control-label">邮箱</label>
                    <input type="text" class="form-control" placeholder="请输入邮箱" style="width: 320px;">
                </div>
                <div class="form-group" style="margin-left: 65px;">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox" style="display: flex;">
                            <a class="register" href="#myModal" data-toggle="modal">Existing account, return to login</a>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <input class="login-btn" type="submit" value="LOGIN"/>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 购物车显示框 -->
<div class="mantle">
    <div class="show-cart-box">
        <div class="show-cart-header">
            <div class="show-cart-icon"><</div>
            <div class="show-cart-img"><img src="image/shoppingbag.png">(4)</div>
        </div>
        <div class="show-cart-list">
            <div class="show-cart-item">
                <img src="image/img.png">
                <div style="width: 100%">
                    <div class="show-cart-info">
                        <p>The monocle guide to good business</p>
                        <div class="show-cart-price">$65</div>
                    </div>
                    <div class="cart-btn-box">
                        <div class="cart-plus">+</div>
                        <div class="cart-num">2</div>
                        <div class="cart-reduce">-</div>
                    </div>
                </div>
            </div>
            <div class="show-cart-item">
                <img src="image/img.png">
                <div style="width: 100%">
                    <div class="show-cart-info">
                        <p>The monocle guide to good business</p>
                        <div class="show-cart-price">$65</div>
                    </div>
                    <div class="cart-btn-box">
                        <div class="cart-plus">+</div>
                        <div class="cart-num">2</div>
                        <div class="cart-reduce">-</div>
                    </div>
                </div>
            </div>
            <div class="show-cart-item">
                <img src="image/img.png">
                <div style="width: 100%">
                    <div class="show-cart-info">
                        <p>The monocle guide to good business</p>
                        <div class="show-cart-price">$65</div>
                    </div>
                    <div class="cart-btn-box">
                        <div class="cart-plus">+</div>
                        <div class="cart-num">2</div>
                        <div class="cart-reduce">-</div>
                    </div>
                </div>
            </div>
            <div class="show-cart-item">
                <img src="image/img.png">
                <div style="width: 100%">
                    <div class="show-cart-info">
                        <p>The monocle guide to good business</p>
                        <div class="show-cart-price">$65</div>
                    </div>
                    <div class="cart-btn-box">
                        <div class="cart-plus">+</div>
                        <div class="cart-num">2</div>
                        <div class="cart-reduce">-</div>
                    </div>
                </div>
            </div>
            <div class="show-cart-item">
                <img src="image/img.png">
                <div style="width: 100%">
                    <div class="show-cart-info">
                        <p>The monocle guide to good business</p>
                        <div class="show-cart-price">$65</div>
                    </div>
                    <div class="cart-btn-box">
                        <div class="cart-plus">+</div>
                        <div class="cart-num">2</div>
                        <div class="cart-reduce">-</div>
                    </div>
                </div>
            </div>
            <div class="show-cart-item">
                <img src="image/img.png">
                <div style="width: 100%">
                    <div class="show-cart-info">
                        <p>The monocle guide to good business</p>
                        <div class="show-cart-price">$65</div>
                    </div>
                    <div class="cart-btn-box">
                        <div class="cart-plus">+</div>
                        <div class="cart-num">2</div>
                        <div class="cart-reduce">-</div>
                    </div>
                </div>
            </div>
            <div class="show-cart-item">
                <img src="image/img.png">
                <div style="width: 100%">
                    <div class="show-cart-info">
                        <p>The monocle guide to good business</p>
                        <div class="show-cart-price">$65</div>
                    </div>
                    <div class="cart-btn-box">
                        <div class="cart-plus">+</div>
                        <div class="cart-num">2</div>
                        <div class="cart-reduce">-</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cart-total-amount">
            <div class="total-amount">
                <div class="subtotal">Subtotal</div>
                <div class="control-label-num">$ 325</div>
            </div>
            <div class="total-amount">
                <div class="shipping">Shipping</div>
                <div class="control-label-num">$ 16</div>
            </div>
            <div class="total-amount-btn">
                CHECKOUT
            </div>
        </div>
    </div>
</div>
</body>
</html>
